<template>
  <BasicDialog ref="basicDialog" :isVisible="isAlert" width="30%" :title="title" @handleSure="handleSure" :isShowSure="flag != 'framework_look'">
    <template #content>
      <el-form ref="formRef" :model="formInfo" :rules="flag != 'framework_look' ? rules : {}" label-width="120px">
        <el-form-item label="父级机构：" prop="pid">
          <el-tree-select
            v-model="formInfo.pid"
            value-key="id"
            :props="{label:'dname'}"
            :check-strictly="true"
            :data="treeData"
            :render-after-expand="false"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="机构名称：" prop="dname">
          <el-input v-if="flag != 'framework_look'" type="text" v-model.trim="formInfo.dname" placeholder="机构名称"
            clearable></el-input>
          <span v-else>{{ formInfo.dname }}</span>
        </el-form-item>
      </el-form>
    </template>
  </BasicDialog>
</template>
<script lang='ts' setup>
import { FormInfo } from "@components/common/BasicForm/BasicFormTypes";
import type { FormInstance, FormRules } from 'element-plus';

import { organizationAdd, organizationEdit,getOrganizationById } from "@/request/apis/system/framework"

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  flag: {
    type: String,
    default: ''
  },
  isAlert: {
    type: Boolean,
    default: false
  },
  parentData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  treeData:{
    require:true,
  }
})

const $emits = defineEmits([
  "closeDialog"
])

//表单数据 
let formInfo = ref<FormInfo>({});
// 表单校验规则
const rules = reactive<FormRules>({
  pid: [{ required: true, message: "不能为空", trigger: "blur" }],
  dname: [{ required: true, message: "不能为空", trigger: "blur" }],
})
// 提交表单校验
const formRef = ref<FormInstance>();
const basicDialog = ref();
async function handleSure() {
  formRef.value.validate(valid => {
    if (valid) {
      basicDialog.value.changeLoading(true);
      let params = {
        ...formInfo.value
      }
      let funName = props.flag == 'framework_add' ? organizationAdd : organizationEdit
      funName(params).then((res: Response) => {
        ElMessage.success("操作成功")
        $emits("closeDialog", 1);
        basicDialog.value.changeLoading(false);
      }).catch(err => {
        basicDialog.value.changeLoading(false);
      })
    } else {
      // $emits("closeDialog", 1);
    }
  })
}



const title = ref("");
onMounted(async () => {
  if (props.flag == "framework_add") {
    formInfo.value.pid = props.parentData.id
    title.value = '新增'
  } else if (props.flag == "framework_edit") {
    formInfo.value = await getOrganizationById(props.info.id)
    title.value = '修改'
  } else if (props.flag == "framework_look") {
    formInfo.value = await getOrganizationById(props.info.id)
    title.value = '查看'
  }
})

</script>

<style scoped lang="scss"></style>